<template>
  <div class="box">
    <el-col :span="10">
      <el-menu
        id="el-menu"
        :router="true"
        style="width: 250px; 
        border: none; 
        user-select: none"
        :default-active="active"
        @select="toView"
      >
        <menus-item v-for="item in tree" :menu="item" :key="item.id">
        </menus-item>
      </el-menu>
    </el-col>
  </div>
</template>

<script setup lang="ts">
import menusItem from "./menus-item.vue"
import { ref, watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()

const props = defineProps<{
  tree: menusType[]
}>()

const active = ref("")

// 接收自定义事件
const emits = defineEmits(["update:show"])

function toView(url: any) {
  console.log(url)
  if (window.innerWidth < 800) {
    emits("update:show", false)
  }
}

// 监听路由,判断哪一个菜单亮起
watch(
  route,
  (value) => {
    active.value = value.path
  },
  {
    immediate: true
  }
)
</script>

<style scoped lang="scss"></style>
